import React, { useState } from 'react';
import Head from 'next/head';
import { View, Text, Button, Input } from '@tarojs/components';
import Taro from '../src/adapters/nextjs';
import './test.less';

export default function TestPage() {
  const [inputValue, setInputValue] = useState('');

  const handleClick = () => {
    Taro.showToast({ title: `Hello! 输入值: ${inputValue}` });
  };

  const handleNavigate = () => {
    Taro.navigateTo({ url: '/' });
  };

  return (
    <>
      <Head>
        <title>测试页面 - Taro + Next.js</title>
        <meta name="description" content="测试Taro组件在Next.js中的工作" />
      </Head>

      <View className="test-page">
        <View className="test-header">
          <Text className="test-title">Taro + Next.js 测试页面</Text>
        </View>

        <View className="test-content">
          <View className="test-section">
            <Text className="section-title">输入测试</Text>
            <Input
              className="test-input"
              value={inputValue}
              onInput={(e) => setInputValue(e.detail.value)}
              placeholder="请输入内容"
            />
          </View>

          <View className="test-section">
            <Text className="section-title">按钮测试</Text>
            <Button className="test-btn" onClick={handleClick}>
              显示提示
            </Button>
            <Button className="test-btn" onClick={handleNavigate}>
              返回首页
            </Button>
          </View>

          <View className="test-section">
            <Text className="section-title">系统信息</Text>
            <Text className="info-text">
              平台: {Taro.getSystemInfo().platform}
            </Text>
            <Text className="info-text">
              屏幕宽度: {Taro.getSystemInfo().screenWidth}
            </Text>
            <Text className="info-text">
              屏幕高度: {Taro.getSystemInfo().screenHeight}
            </Text>
          </View>
        </View>
      </View>
    </>
  );
}
